<template>
	<view class="enterprise-manage">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="search-wrap">
				<view class="ipt-wrap">
					<view style="margin-left: 10rpx;">
						<uni-data-picker style="width: 100%;" placeholder="区域" v-model="queryParams.district"
							class="data-picker" popup-title="请选择所在地区" :localdata="dataTree" @change="sessionChange">
						</uni-data-picker>
					</view>
				</view>
				<button @click="getList">查询</button>
			</view>
			<view class="list">
				<noData v-if="dataList.length==0" />
				<view class="item" v-for="item in dataList" :key="item.id" @click="jumpList(item.districtid)">
					<view class="title">{{item.districtname}}</view>
					<view class="data-line">
						<view class="waste-enter">
							产废企业：<text>{{item.num_enterprise}}</text>
						</view>
						<view class="near-enter">
							临期企业：<text>{{item.num_enterprise_neardate}}</text>
						</view>
						<view class="device-num">
							设施数量：<text>{{item.num_device_all}}</text>
						</view>
					</view>
					<view class="data-line" style="margin-top: 30rpx;">
						<view class="dispose-enter">
							处置企业：<text>{{item.num_enterprisethird}}</text>
						</view>
						<view class="over-due">
							逾期企业：<text>{{item.num_enterprise_expiredate}}</text>
						</view>
						<view class="device-stop">
							停用设施：<text>{{item.num_device_outofservice}}</text>
						</view>
					</view>
					<view class="unit">
						<view class="name">执法部门：</view>
						<view class="val">{{item.departmentname}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'

	let agent = ref('')
	let name = "企业管理"
	let dataTree = ref()
	let queryParams = reactive({

	})
	let dataList = ref([])
	onLoad((e) => {
		agent.value = e.agent
	})
	let jumpList = (id) => {
		console.log(id, 'd');
		uni.navigateTo({
			url: `/contorllerPageOther/enterpriselist/enterpriselist?agent=${agent.value}&id=${id}`
		})
	}
	let getList = () => {
		http({
			url: '/enterprise/suminfo',
			data: {
				...queryParams
			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data
			}


		})
	}
	getList()

	function mapTree(data) {
		console.log(data, 'data');
		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id
			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {

					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}


				}
			}
			return item

		})

	}
	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			let cc = mapTree(data)
			dataTree.value = data


		}

	})

	onShow(() => {

	})
	let sessionChange = (e) => {

		let id = e?.detail?.value[e.detail.value.length - 1]?.value

		queryParams.district = id
	}
	let jumpDetail = () => {
		uni.navigateTo({
			url: "/contorllerPageOther/wasteenterprisefiltrate/wasteenterprisefiltrate"
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.ipt-class) {
		font-weight: 400;
		font-size: 25rpx;
		color: #666666;

	}

	:deep(.uni-select) {
		border: none !important;


		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.icon-calendar) {
		display: none;
	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
	}

	:deep(.input-value-border) {
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		border: none;
	}

	.enterprise-manage {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			width: 100vw;
			height: calc(100vh - 160rpx);
			background-color: #F3F5F7;
			display: flow-root;
			overflow: hidden;

			.list {
				height: calc(100vh - 160rpx - 112rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 34rpx;
				overflow: auto;

				.item:first-child {
					margin-top: 0 !important;
				}

				.item {
					margin-top: 24rpx;
					display: flex;
					flex-direction: column;
					width: 702rpx;

					background: #FFFFFF;
					border-radius: 21rpx;
					padding-top: 70rpx;
					padding-bottom: 20rpx;
					position: relative;

					.title {
						left: 0;
						top: 0;
						position: absolute;
						width: 127rpx;
						height: 42rpx;
						background: #0874FA;
						border-radius: 21rpx 0rpx 21rpx 0rpx;
						text-align: center;
						font-weight: 400;
						font-size: 25rpx;
						color: #FFFFFF;
						line-height: 42rpx;
					}

					.unit {
						display: flex;
						align-items: center;
						width: 651rpx;

						background: #F4F6F8;
						margin-left: 25rpx;
						border-radius: 7rpx;
						margin-top: 25rpx;
						padding: 11rpx 0rpx;

						.name {
							padding-left: 17rpx;
							font-weight: 500;
							font-size: 21rpx;
							color: #5E6062;

						}

						.val {

							font-weight: 400;
							font-size: 21rpx;
							color: #5E6062;

						}
					}

					.data-line {
						display: flex;
						padding-left: 31rpx;
						padding-right: 46rpx;
						justify-content: space-between;

						.waste-enter,
						.near-enter,
						.device-num,
						.dispose-enter,
						.over-due,
						.device-stop {
							flex: 1;
							font-weight: 400;
							font-size: 25rpx;
							color: #333333;


							text {
								font-weight: 400;
								font-size: 28rpx;
							}
						}

						.waste-enter {

							text {
								color: #0874FA;
							}

						}

						.near-enter {
							text {
								color: #FF9900;
							}
						}

						.device-num {
							text {
								color: #333333
							}
						}

						.dispose-enter {
							text {
								color: #0874FA
							}
						}

						.over-due {
							text {
								color: #FF0000
							}
						}

						.device-stop {
							text {
								color: #333333
							}
						}
					}
				}
			}

			.search-wrap {
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				margin-bottom: 22rpx;
				padding: 0 22rpx;
				justify-content: space-between;

				.ipt-wrap {
					width: 574rpx;
					height: 67rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					display: flex;
					align-items: center;

					.line {
						width: 1rpx;
						height: 35rpx;
						background: #E8E8E8;
						margin-left: 15rpx;
						margin-right: 15rpx;
					}
				}

				button {
					width: 118rpx;
					height: 67rpx;
					background: #0874FA;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 67rpx;

				}
			}



		}
	}
</style>